import { directionList } from "../UI/skinViewMediator";


/**
 * 由于pageview 只能整页翻动, 看不到当前页左右的页面, 所以这里利用 scroolView实现一个类似的效果
 * 做法 编辑器创建一个 ScrollView, 绑定这个脚本, 给Content加上 Layout 组件 设置 padding left right
 * 使item第一个和最后一个都在content的中间, 不要设置 Spacing
 *
 *
 */
const {ccclass, property} = cc._decorator;

@ccclass
export default class PageScrollView extends cc.Component {

    @property({visible : false})
    Direction : directionList = directionList.Horizontal;

    @property({type : cc.Enum(directionList),displayName : "模式"})
    get updateDirection() : directionList{
        return this.Direction;
    }
    set updateDirection(value){
        if (this.Direction === value) {
            return;
        }
        this.Direction = value;
    }


    @property({visible : false})
    itemOffset : number = 0;
    @property({displayName : "每个item间隔"})
    get positionGet(): number{
        return this.itemOffset;
    }
    set positionGet(value: number){
        if (this.itemOffset === value) {
            return;
        }
        this.itemOffset = value;
    }


    @property({visible : false})
    speed : number = 0;

    @property({displayName : "移动速度"})
    get speedGet(): number{
        return this.speed;
    }
    set speedGet(value: number){
        if (this.speed === value) {
            return;
        }
        this.speed = value;
    }

    @property
    item : cc.Node[] = [];

    @property({type : cc.Node,displayName : "滚动item"})
    get itemGet(){
        return this.item;
    }
    set itemGet(value){

    }

    @property({displayName : "减速频率"})
    rub : number = 1.0;

    @property({displayName : "缩放最小值"})
    scaleMin : number = 0.5;

    @property({displayName : "缩放最大值"})
    scaleMax : number = 1;

    _startTime = 0;

    _moveSpeed = 0;

    _maxSize = null;

    _screenRect = null;

    itemList = [];

    initSetPos = null;

    _initItemPos() {
        this.node.anchorY = 1;
        this.node.anchorX = 0.5;
        this._maxSize = new cc.Size(0, 0);
        for (let i = 0; i < this.item.length; i++) {
            this._maxSize.width += this.item[i].width;
            this._maxSize.height += this.item[i].height;
            this._maxSize.width += this.itemOffset;
            this._maxSize.height += this.itemOffset;
        }
        let startPos;
        if (this.Direction == 0) {
            // startPos = cc.v2(this._maxSize.width * this.node.anchorX, -this._maxSize.height * this.node.anchorY);
            if(this.initSetPos != null){
                startPos = cc.v2(this.item[0].x - this.item[1].x, -this._maxSize.height * this.node.anchorY);
            }else{
                startPos = cc.v2(0, -this._maxSize.height * this.node.anchorY);
            }
        } else {
            startPos = cc.v2(this._maxSize.width * this.node.anchorX, this._maxSize.height * this.node.anchorY);
        }
        this._screenRect = new cc.Rect(startPos.x, startPos.y, this._maxSize.width, this._maxSize.height);
        for (let i = 0; i < this.item.length; i++) {
            let anchor = this.item[i].getAnchorPoint();
            let itemSize = this.item[i].getContentSize();

            if (this.Direction == 0) {
                startPos.addSelf(cc.v2(itemSize.width * anchor.x, itemSize.height * anchor.y));
                this.item[i].x = startPos.x;
                this.item[i].y = 0;
                startPos.addSelf(cc.v2(itemSize.width * anchor.x, itemSize.height * anchor.y));
                startPos.addSelf(cc.v2(this.itemOffset, this.itemOffset));
            } else {
                startPos.subSelf(cc.v2(itemSize.width * anchor.x, itemSize.height / 2 * anchor.y));
                this.item[i].x = 0;
                this.item[i].y = startPos.y;
                startPos.subSelf(cc.v2(itemSize.width * anchor.x, itemSize.height / 2 * anchor.y));
                startPos.subSelf(cc.v2(this.itemOffset, this.itemOffset));
            }
            this.itemList[i] = this.item[i];
        }
    }

    onLoad(){
        this._initItemPos();

        this.node.on('touchstart', function (event) {
            this._moveSpeed = 0;
            this._startTime = new Date().getTime();
        }.bind(this));

        this.node.on('touchmove', function (event) {
            let movePos = event.getDelta();
            this.itemMoveBy(movePos);
        }.bind(this));

        this.node.on('touchend', function (event) {
            this.touchEnd(event)
        }.bind(this));

        this.node.on('touchcancel', function (event) {
            this.touchEnd(event)
        }.bind(this));
    }


    touchEnd(event) {

        let curpos = event.getLocation();
        let startpos = event.getStartLocation();

        let dis;
        if (this.Direction == 0) {
            dis = startpos.x - curpos.x;
        } else {
            dis = startpos.y - curpos.y;
        }

        let curTime = new Date().getTime();
        let disTime = curTime - this._startTime;
        this._moveSpeed = dis / disTime;
    }

    itemMoveBy(pos) {
        let startItem = this.itemList[0];
        let endItem = this.itemList[this.itemList.length - 1];

        if(startItem.x + pos.x >= 0){
            pos.x = -startItem.x;
        }else if(endItem.x + pos.x <= 0){
            pos.x = -endItem.x;
        }
        for (let i = 0; i < this.item.length; i++) {
            if (this.Direction == 0) {
                this.item[i].x += pos.x;
            } else {
                this.item[i].y += pos.y;
            }
        }
        this.updatePos();
    }

    updatePos() {
        this.updateScale();
    }

    updateScale() {
        if (this.scaleMax < this.scaleMin || this.scaleMax == 0) {
            return;
        }
        for (let i = 0; i < this.item.length; i++) {
            let pre;
            if (this.Direction == 0) {
                let x = this.item[i].x + this._maxSize.width / 2;
                if (this.item[i].x < 0) {
                    pre = x / this._maxSize.width;
                }
                else {
                    pre = 1 - x / this._maxSize.width;
                }
            } else {
                let y = this.item[i].y + this._maxSize.height / 2;
                if (this.item[i].y < 0) {
                    pre = y / this._maxSize.height;
                }
                else {
                    pre = 1 - y / this._maxSize.height;
                }
            }
            pre *= 2;
            let scaleTo = this.scaleMax - this.scaleMin;
            scaleTo *= pre;
            scaleTo += this.scaleMin;
            scaleTo = Math.abs(scaleTo);
            this.item[i].scaleX = scaleTo;
            this.item[i].scaleY = scaleTo;
        }
    }

    protected update(dt: number): void {
        if(this.item[0].y >= 0){
            this._moveSpeed = 0;
        }
        for (let i = 0; i < this.item.length; i++) {
            if (this.Direction == 0) {
                this.item[i].x -= this._moveSpeed * dt * this.speed;
            } else {
                this.item[i].y -= this._moveSpeed * dt * this.speed;
            }
        }
        if (this._moveSpeed > 0) {
            this._moveSpeed -= dt * this.rub;
            if (this._moveSpeed < 0) {
                this._moveSpeed = 0;
            }
        } else {
            this._moveSpeed += dt * this.rub;
            if (this._moveSpeed > 0) {
                this._moveSpeed = 0;
            }
        }
        let moveTo = -this._moveSpeed * dt * this.speed;
        this.itemMoveBy(cc.v2(moveTo, moveTo));
        this.updatePos()
    }
}
